<template name="lmItem">
	<view class="lmRow" @tap="toLmPage" v-show="showlmRow">
		<view class="imgBox">
			<text>{{ lmItem.areaSub }}</text>
			<image :src="goodInfo.actPic" mode="aspectFill"></image>
		</view>
		<text class="actName">{{ lmItem.actName }}</text>
		<view class="priceBox">
			<text class="price">￥{{goodInfo.price}}</text>
			<text class="oldPrice" v-if="goodInfo.oriPrice>goodInfo.price">￥{{goodInfo.oriPrice}}</text>
			<text class="jujieshu">距结束</text>
			<text class="endTime">{{djsText}}</text>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	name: 'lmItem', //组件名称
	// 传递参数
	props: {
		lmItem: {
			type: Object,
			default: null
		}
	},
	watch:{
		lmItem(newVal){
			this.getCircle();
			// this.checkXieYi();
		}
	},
	// 组件参数
	data() {
		return {
			goodInfo:{
				actName:'联盟活动名称',
				actPic:'',
				price:0,
				oriPrice:0,
				djsText:'正在加载'
			},
			djsText:'',
			// 控制lmRow的显示和隐藏,默认为true
			showlmRow:true
		};
	},
	// 组件方法
	methods: {
		getGood() {
			if(this.lmItem.id){
				this.$store.dispatch('apiGetGroupDetail', {
					id: parseInt(this.lmItem.id),
					userId:0
				}).then(res => {
				
					this.goodInfo=res.data.data
					
				});
			}
			
		},
		getDjs(){
			setInterval(()=>{
				let _now=new Date();
				let _end=new Date(this.lmItem.endTime.replace(/-/g, "/"));
				
				let _leftTime=_end.getTime()-_now.getTime();
				var _kaishi = new Date(this.lmItem.startTime.replace(/-/g, "/"));
				var _zhanshiTime = _kaishi.getTime() - _now.getTime();
				if(_zhanshiTime>0){
					var month = _kaishi.getMonth() + 1 + '月';
					var date = _kaishi.getDate() + '日';
					this.djsText = '该活动' + month + date + '开始';
				}else if(_leftTime>0){
					let _day= Math.floor(_leftTime/(1000*60*60*24));
					let _hour=Math.floor(_leftTime/(1000*60*60)%24);
					let _min= Math.floor(_leftTime/(1000*60)%60);
					let _sec= Math.floor(_leftTime/1000%60);
					_hour=_hour>9?_hour:'0'+_hour;
					_min=_min>9?_min:'0'+_min;
					_sec=_sec>9?_sec:'0'+_sec;
					if(_day>=1){
						this.djsText=_day + "天 " + _hour + ":" + _min + ":" + _sec
					}else{
						this.djsText = _hour + ":" + _min + ":" + _sec
					}
					
				}else{
					this.djsText='该活动已结束'
					// showlmRow控制lmRow的显示和隐藏,当_leftTime小于或等于0时隐藏lmRow
					this.showlmRow = false
				}
				
			},1000)
			
		},
		toLmPage(){
			uni.setStorageSync('lmAct',this.lmItem)
			this.toPage({
				url:'lmDetail',
				id:this.goodInfo.id
				
			})
		}
	},
	created() {
		setTimeout(()=>{
			this.getGood();
			this.getDjs();
		},500)
	}
};
</script>

<style lang="less">
.lmRow {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 10upx;
	// padding: 20upx;
	box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(201, 202, 208, 0.15);
	margin-bottom: 20upx;
	.imgBox {
		position: relative;
		width: 100%;
		text {
			position: absolute;
			z-index: 2;
			display: block;
			top: 24upx;
			left: 0;
			background-color: #ffc230;
			padding: 0 30upx 0 20upx;
			font-size: 32upx;
			height: 50upx;
			line-height: 50upx;
			color: #ffffff;
			border-top-right-radius: 25upx;
			border-bottom-right-radius: 25upx;
		}
		image {
			width: 100%;
			height: 250upx;
			border-radius: 10rpx;
			
		}
	}
	.actName {
		font-size: 32upx;
		margin-top: 10upx;
		margin-bottom: 30upx;
		color: #202932;
		padding: 0 20rpx 0 20rpx;
	}
	.priceBox {
		display: flex;
		align-items: baseline;
		padding: 0 20rpx 20rpx 20rpx;
		width: 100%;
		.price {
			font-weight: bold;
			color: #f93d3d;
			font-size: 38upx;
			margin-right: 20upx;
		}
		.oldPrice {
			font-size: 28upx;
			color: #9d9d9d;
			text-decoration: line-through;
		}
		.jujieshu {
			flex-grow: 1;
			text-align: right;
			font-size: 28upx;
			color: #202932;
			margin-right: 10upx;
		}
		.endTime {
			font-size: 28upx;
			color: #ffad1f;
		}
	}
}
</style>
